<template>
  <div class="tu" ref="mapcontainer"></div>
</template>
<script setup>
import { onMounted, ref, shallowRef } from 'vue'
import * as echarts from 'echarts'
import { getmap } from '../../request/index'
const mapcontainer = shallowRef()

const mapData = shallowRef([
  {
    adcode: 100000,
    mapname: 'china'
  }
])
// console.log(mapData)

const init = (adcode, mapname) => {
  getmap(adcode)
    .then((res) => {
      var myChart = echarts.init(mapcontainer.value)
      echarts.registerMap(mapname, res.data)
      let option = {
        title: {
          text: `${mapname}地图`,
          left: 'center',
          top: '2%',
          textStyle: {
            color: '#fff'
          }
        },
        series: [
          {
            show: true,
            roam: false,
            zoom: 1.2,
            name: `${mapname}地图`,
            //使用上面注册的地图
            map: mapname,
            //初始化类型写地图
            type: 'map',
            // roam: true, //鼠标滚轮缩放
            selectedMode: false, // 点击选中区域
            // 区块文字样式
            label: {
              normal: {
                formatter: '{b}',
                show: true,
                textStyle: {
                  color: '#fff',
                  fontSize: '8px'
                }
              },
              emphasis: {
                show: true,
                textStyle: {
                  color: '#05C3F9'
                }
              }
            },
            // 区块样式
            itemStyle: {
              normal: {
                areaColor: '#00BAFF',
                borderColor: '#00BAFF',
                borderWidth: 1
              },
              emphasis: {
                areaColor: '#00BAFF',
                shadowColor: '#00BAFF  ',
                shadowBlur: 20
              }
            },
            // select: { // 地图选中区域样式
            //     label:{ // 选中区域的label(文字)样式
            //         color: '#fff'
            //     },
            //     itemStyle: {// 选中区域的默认样式
            //         areaColor: '#256CBE'
            //     },
            // },
            data: []
          }
        ]
      }
      option.series[0].data = res.data.features.map((item, index) => {
        return {
          name: item.properties.name,
          value: item.properties.childrenNum,
          adcode: item.properties.adcode
        }
      })
      myChart.setOption(option)
      //
      myChart.off('click', onclick)
      myChart.off('contextmenu', oncontextmenu)
      myChart.on('click', function (params) {
        console.log(params)
        mapData.value.push({
          adcode: params.data.adcode,
          mapname: params.data.name
        })
        init(params.data.adcode, params.data.name)
      })
      myChart.on('contextmenu', function (params) {
        if (mapData.value.length == 1) {
          alert('不能后退了')
          return
        }
        params.event.stop()
        mapData.value.pop()
        const { adcode, mapname } = mapData.value[mapData.value.length - 1]
        console.log(adcode, mapname)
        init(adcode, mapname)
      })
      //适配
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    })
    .catch((err) => {
      console.log(err)
    })
}

onMounted(() => {
  init(100000, 'china')
})
</script>


<style scoped lang='scss'>
.tu {
  width: 100%;
  height: 100%;
}
</style>
